<template>
  <el-dialog
    v-el-drag-dialog
    :title="'添加模板'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="30%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="模板名称：" prop="name" label-width="100px">
        <el-input type="text" placeholder="请输入名称 不超过30个字符" v-model.trim="dataForm.name" maxlength="30" show-word-limit style="width:400px"/>
      </el-form-item>
      <el-form-item label="模板内容： " prop="content" label-width="100px">
        <el-input type="textarea" :rows="6" placeholder="示例：请输入你要发的短信内容" v-model.trim="dataForm.content" style="width:400px" />
          <ul>
            <li><span>短信字数＝短信模版内容字数 + 签名字数</span></li>
            <li><span>短信字数<=70个字数，按照70个字数一条短信计算</span></li>
            <li><span>短信字数>70个字数，即为长短信，按照67个字数记为一条短信计算</span></li>
          </ul>
      </el-form-item>
      <el-form-item label="申请说明： " prop="remarks" label-width="100px">
        <el-input type="textarea" :rows="6" placeholder="请描述您的业务使用场景" v-model.trim="dataForm.remarks" style="width:400px" />
      </el-form-item>
    </el-form>
    <div style="margin-left: 103px">
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <el-button type="info" @click="visible = false">取消</el-button>
      <ul>
        <li>预计两小时完成审核</li>
        <li>审核工作时间：周一到周日9：00-23：00（法定日顺延）</li>
      </ul>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        visible: false,
        dataListLoading: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataForm: {
          content: '',
          name: '',
          remarks: ''
        },
        dataRule: {
          content: [
            {required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '模板名称不能为空', trigger: 'blur'}
          ],
          remarks: [
            {required: true, message: '申请说明不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    components: {
    },
    methods: {
      init () {
        this.visible = true
        if (this.$refs['dataForm'] !== undefined) {
          this.$refs['dataForm'].resetFields()
        }
      },
      dataFormSubmit () {
        debugger
        this.$confirm(`确定提交操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/message/addTemplate'),
            method: 'post',
            params: this.$http.adornParams({
              'name': this.dataForm.name,
              'content': this.dataForm.content,
              'remarks': this.dataForm.remarks
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '模板以提交',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  debugger
                  this.visible = false
                  this.$emit('refreshTemplate')
                }
              })
              debugger
              this.dataForm.name = ''
              this.dataForm.content = ''
              this.dataForm.remarks = ''
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
<style>
  #div1{
    margin-left: 130px;
  }
</style>
